<template>
	<view>
		<view class="main">
			<!-- <view class="shuru t1">办理商户必须绑定代理手机号，以确保后期商户信息的反馈。 </view> -->
			<view class="shuru">
				<text class="shuru_tit t1">代理手机号</text>
				<input type="number" class="shuru_text t1" value="" v-model="phone" placeholder="请输入代理手机号" />
			</view>
			<view class="shuru">
				<text class="shuru_tit t1">门店名称</text>
				<input type="number" class="shuru_text t1" value="" v-model="phone" placeholder="请输入门店名称" />
			</view>
			<view class="shuru">
				<text class="shuru_tit t1" style="width:40%;display: block;float: left;height: auto;">门店所属地区</text>
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange1" :value="dmultiIndex"
					:range="dmultiArray" style="text-align: right;width: 100%;">
					<view class="uni-input shuru_text2 t1" v-if="diqu!=''" style="width: 50%;display: block;float: left;height: auto;margin-right: 0;">
						{{diqu}}
					</view>
					<image src="../../static/img/turn.png" mode="heightFix"	style="height: 4vw;width: auto;display: block;float: right;margin-top: 3vw;margin-left: 2vw;">
					</image>
					<view class="uni-input shuru_text2 t1" v-if="diqu==''" style="display: block;float: right;width: 50%;height: auto;margin-right: 0;">
						{{dmultiArray[0][dmultiIndex[0]]}}，{{dmultiArray[1][dmultiIndex[1]]}}，{{dmultiArray[2][dmultiIndex[2]]}}，{{dmultiArray[3][dmultiIndex[3]]}}
					</view>
					
				</picker>
			</view>
			<view class="shuru">
				<text class="shuru_tit t1">门店所在小区</text>
				<picker @change="dbindPickerChange" :value="communitys" :range="darray" class="shuru_text2"
					style="line-height: 10vw;text-align: right;" range-key="name" v-if="communitys!=''">
					<view class="uni-input t1">{{darray[dindex].name}}</view>
				</picker>
				<input type="text" class="shuru_text t1" value="" v-model="community" placeholder="请输入所在小区" v-if="communitys==''" />
			</view>
			<view class="shuru">
				<text class="shuru_tit t1">门店详细位置</text>
				<text class="shuru_text t1" @click="dingwei()">{{adrname}}
					<image src="../../static/img/turn.png" mode="heightFix"
						style="height: 4vw;width: auto;display: block;float: right;margin-top: 3vw;margin-left: 2vw;">
					</image>
				</text>
			</view>
			<view class="shuru">
				<text class="shuru_tit t1">门店详细地址</text>
				<input type="text" class="shuru_text t1" value="" v-model="xxdz" placeholder="xx大厦x层xxxx室" />
			</view>
		</view>
		<view class="tuic t2" @click="info()">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainid: '',
				imageSrc: '',
				src: '',
				phone: '',
				index: 0,	
				dnui1: [],
				dnui2: [],
				dnui3: [],
				dnui4: [],
				dmultiArray: [
					[],
					[],
					[],
					[],
				],
				xxdz: '',
				darray: [],
				dmultiIndex: [0, 0, 0, 0],
				dpickerid1: '',
				dpickerid2: '',
				dpickerid3: '',
				dpickerid4: '',
				array: [{
					value: '无限',
					type: '0'
				}, {
					value: '省',

					type: '1'
				}, {
					value: '市',
					type: '2'
				}, {
					value: '区',
					type: '3'
				}, {
					value: '街道',
					type: '4'
				}, {
					value: '小区',
					type: '5'
				}],
				dindex:0,
				diqu:'',
				pid: '',
				cid: '',
				qid: '',
				xid: '',
				aid: '',
				aname: '',
				adrid: '',
				communitys: '',
				community: '',
				dpid: '',
				provinceId: '',
				cityId: '',
				districtId: '',
				areaId: '',
				xxdz1: '',
				adrname:'',
			}
		},
		onLoad() {
			var _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					_this.dadr();
				}
			});
		},
		methods: {	
			dbindPickerChange: function(e) {
				// console.log(e);
				this.dindex = e.detail.value
				console.log(this.dindex);
				// this.community = this.darray[this.dindex].name;
				this.communitys = this.darray[this.dindex].name;
			},
			bindMultiPickerColumnChange1: function(e) {
				var _this = this;
				// _this.diqu = '';
				_this.dmultiIndex[e.detail.column] = e.detail.value;
				_this.diqu = '';
				if (e.detail.column == 0) {
					_this.dpickerid1 = _this.dnui1[e.detail.value].id;
					_this.provinceId = _this.dnui1[e.detail.value].id;
					_this.dmultiIndex = [e.detail.value, 0, 0, 0];
					_this.dadr1();
				} else if (e.detail.column == 1) {
					_this.dpickerid2 = _this.dnui2[e.detail.value].id;
					_this.cityId = _this.dnui2[e.detail.value].id;
					_this.dmultiIndex[2] = 0;
					_this.dmultiIndex[3] = 0;
					// _this.bizAddressCode = _this.dnui2[e.detail.value].id;
					// console.log(_this.bizAddressCode)
					_this.dadr2();
				} else if (e.detail.column == 2) {
					_this.dpickerid3 = _this.dnui3[e.detail.value].id;
					_this.districtId = _this.dnui3[e.detail.value].id;
					_this.dmultiIndex[3] = 0;
					_this.dadr3();
				} else if (e.detail.column == 3) {
					_this.dmultiIndex[3] = e.detail.value;
					// console.log(e.detail.value);
					console.log(_this.dmultiIndex[3]);
					_this.dpickerid4 = _this.dnui4[e.detail.value].id;
					_this.areaId = _this.dnui4[e.detail.value].id;
					_this.communitys = '1';
					console.log(e.detail.column);
					console.log(_this.communitys);
					// _this.dmultiIndex[3] = 0;
					_this.darray = [{
						'name': '',
						'id': ''
					}];
					_this.xiaoqu();
				}
				this.$forceUpdate()
			},
			dpadr(id) {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/address/' + id, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.status == '200') {
							_this.diqu = res.data.data.province + ',' + res.data.data.city + ',' + res.data
								.data.area + ',' + res.data.data.street;
							// _this.adrname2=res.data.data.province+','+res.data.data.city+','+res.data.data.area+','+res.data.data.street;
							_this.dpickerid1 = res.data.data.provinceId;
							_this.dpickerid2 = res.data.data.cityId;
							_this.dpickerid3 = res.data.data.areaId;
							_this.dpickerid4 = res.data.data.streetId;
							_this.latitude = res.data.data.lat;
							_this.longitude = res.data.data.lon;
							_this.latitude1 = res.data.data.lat;
							_this.longitude1 = res.data.data.lon;
							_this.community = res.data.data.name;
							_this.xxdz = res.data.data.address;
							_this.xxdz1 = res.data.data.address;
							_this.pid = res.data.data.provinceId;
							_this.qid = res.data.data.areaId;
							_this.cid = res.data.data.cityId;
							_this.xid = res.data.data.streetId;
							_this.provinceId = res.data.data.provinceId;
							_this.districtId = res.data.data.areaId;
							_this.cityId = res.data.data.cityId;
							_this.areaId = res.data.data.streetId;

						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			dadr() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/areaList/', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						parentId: ''
					},
					success: (res) => {
						if (res.data.status == '200') {
							_this.dnui1 = res.data.data;
							for (var i = 0; i < res.data.data.length; i++) {
								_this.dmultiArray[0].push(res.data.data[i].name);
							}
							_this.dpickerid1 = res.data.data[0].id;
							// _this.pid = res.data.data[0].id;
							_this.dadr1();
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			dadr1() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/areaList/' + _this.dpickerid1, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						parentId: _this.dpickerid1 //	用户ID（mainId）
					},
					success: (res) => {
						if (res.data.status == '200') {
							_this.dnui2 = res.data.data;
							var list = [];
							for (var i = 0; i < res.data.data.length; i++) {
								list.push(res.data.data[i].name);
							}
							this.dmultiArray.splice(1, 1, list)
							_this.dpickerid2 = res.data.data[0].id;
							// _this.cid = res.data.data[0].id;
							_this.bizAddressCode = res.data.data[0].id;
							_this.dadr2();
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			dadr2() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/areaList/' + _this.dpickerid2, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						parentId: _this.dpickerid2 //	用户ID（mainId）
					},
					success: (res) => {
						if (res.data.status == '200') {
							if (res.data.data) {
								_this.dnui3 = res.data.data;
								var list = [];
								for (var i = 0; i < res.data.data.length; i++) {
									list.push(res.data.data[i].name);
								}
								this.dmultiArray.splice(2, 1, list)
								// _this.qid = res.data.data[0].id;
								_this.dpickerid3 = res.data.data[0].id;
								_this.districtId = res.data.data[0].id;
								_this.dadr3();
								// console.log(_this.bizAddressCode);
							}
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			dadr3() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/areaList/' + _this.dpickerid3, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						parentId: _this.qid //	用户ID（mainId）
					},
					success: (res) => {
						if (res.data.status == '200') {
							// console.log(res.data.data);
							if (res.data.data) {
								_this.dnui4 = res.data.data;
								var list = [];
								for (var i = 0; i < res.data.data.length; i++) {
									list.push(res.data.data[i].name);
								}
								_this.dmultiArray.splice(3, 1, list)
								// _this.xid = res.data.data[0].id;
								_this.dpickerid4 = res.data.data[0].id;
								// console.log(_this.dpickerid4);
								_this.xiaoqu();
							}
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			xiaoqu() {
				var _this = this;
				// console.log(_this.dpickerid4);
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/communityList/' + _this.dpickerid4, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						streetId: _this.dpickerid4
					},
					success: (res) => {
						// console.log(res.data.data);
						_this.communitys = '';
						if (res.data.status == '200') {
							if (res.data.data.length > 0) {
						_this.communitys = '1';
						_this.community = '';
								// console.log(res.data.data);
								var list = [];
								for (var i = 0; i < res.data.data.length; i++) {
									list.push(res.data.data[i]);
								}
								// _this.aname=res.data.data[0].name;
								_this.darray = list;
								if (_this.id == '') {
									_this.community = res.data.data[0].name;
								}
							}else{
								_this.communitys = '';
							}
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			info() {
				var _this = this;
				// console.log(_this.qbid);
				if (_this.checks === false) {
					return false
				}
				if (!_this.phone) {

					uni.showToast({
						title: '请输入代理手机号',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				var pattern = /^1[3456789]\d{9}$/;
				if (!pattern.test(_this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				_this.checks = false
				_this.adrchange();
			},
			adrchange() {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'area/saveOrUpdateAddress', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						address: _this.xxdz, ////	详细地址		false	string
						areaId: _this.dpickerid3, //	区		false	string
						cityId: _this.dpickerid2, //	市		false	string
						id: _this.adrid, //	id		false	string
						lat: _this.latitude, //'36.461843', //	纬度		false	string
						lon: _this.longitude, //'116.043516',//	经度		false	string
						name: _this.community, //	小区名		false	string
						provinceId: _this.dpickerid1, //	省		false	string
						streetId: _this.dpickerid4, //
					},
					success: (res) => {
						console.log(res);
						// uni.hideLoading(); //关闭加载动画
						_this.checks = true
						if (res.data.status == '200') {
							_this.peizhi(res.data.data);
						}
					},
					fail: (error) => {
						uni.hideLoading();
						_this.checks = true
						console.log(error)
					}
				});
			},
			bangding(adrid){				
				var _this = this;
				var data = {
					"aliId": "",
					"invitePhone": _this.phone,
					"mchId": _this.mainid,
					"mchPhone": "",
					"wechatId": ""
				}
				data = JSON.stringify(data);
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'v1/mch/bindInvite', //仅为示例，并非真实接口地址。
					method: 'post',
					data: data,
					success: (res) => {
				_this.checks = true;
						if (res.data.status == '200') {
							uni.showToast({
								title: '邀请人信息提交成功,等待审核',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
				
						} else {
				
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
				_this.checks = true;
						console.log(error)
					}
				});
			},
		}
	}
</script>

<style>
	.shuru {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		border-radius: 1vw;
		overflow: hidden;
		padding: 2vw 4vw;
		background: #fff;
		margin-top: 3vw;
		box-shadow: 0px 0px 5px #eee;
	}
	.shuru_tit {
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
	}
	
	.shuru_text {
		width: 55%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: right;
		text-align: right;
	}
	.shuru_image {
		width: 10vw;
		height: 10vw;
		display: block;
		float: right;
		border-radius: 2vw;
		overflow: hidden;
		background: #F2F2F2;
	}

	/* 	.tuic {
		width: 90%;
		height: 14vw;
		display: block;
		float: left;
		text-align: center;
		line-height: 14vw;
		background: url(../../static/img/tuichu.png) no-repeat top center;
		background-size: 100%;
		margin: 0 5%;
		margin-top: 3vw;
	} */
</style>
